import React, { ReactElement, useContext, useMemo } from 'react';
import { View, ScrollView } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import AdaptImage from '../../../../components/AdaptImage';
import { phonePx } from '../../../../util/adapt';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { spuInfo } = state;
  const { showImages } = spuInfo;

  return useMemo(
    (): ReactElement => (
      <ScrollView
        style={styles.content}
        pagingEnabled
        horizontal
        showsHorizontalScrollIndicator={false}
        scrollEnabled={false}
      >
        <View>
          {showImages.map(
            (item): ReactElement => (
              <AdaptImage
                useWebView
                source={{ uri: item }}
                showWidth={phonePx(360)}
                style={styles.detailImage}
              />
            )
          )}
        </View>
      </ScrollView>
    ),
    [showImages]
  );
};
